<template>
  <div class="shop">
    <img
      class="shop__img"
      :src="item.imgUrl"
    />
    <div :class="{'shop__desc': true, 'shop__desc--bordered': hideBorder ? false: true}">
      <div class="shop__desc__header">{{item.name}}</div>
      <div class="shop__desc__middle">
        <div class="shop__desc__middle__info">月售：{{item.sales}}</div>
        <div class="shop__desc__middle__info">起送¥{{item.expressLimit}}</div>
        <div class="shop__desc__middle__info">基础运费¥{{item.expressPrice}}</div>
      </div>
      <div class="shop__desc__vip">
        {{item.slogan}}
      </div>
      <!-- <div class="shop__desc__divide"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props: ['item', 'hideBorder']
}
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
.shop {
  display: flex;

  margin-bottom: 0.12rem;
  &__img {
    width: 0.56rem;
    height: 0.56rem;
  }
  &__desc {
    margin-left: 0.16rem;

    &--bordered {
      border-bottom: 0.01rem solid $content-bgColor;
    }
    &__header {
      margin-bottom: 0.12rem;

      font-size: 0.16rem;
      font-weight: 700;
      color: $content-fontcolor;
    }
    &__middle {
      display: flex;

      margin-bottom: 0.12rem;
      &__info {
        margin-right: 0.16rem;

        font-size: 0.13rem;

        color: $content-fontcolor;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    &__vip {
      margin-bottom: 0.08rem;

      font-size: 0.13rem;

      color: #e93b3b;
    }
  }
}
</style>
